<template>
      <!-- 导航栏 -->
      <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <!-- 收获地址 -->
    <van-contact-card
        type="edit"  
        v-if="address"
        :tel="address.mobile"
        :name="address.consignee+'&nbsp;&nbsp;&nbsp;'+address.region_text+'&nbsp;&nbsp;&nbsp;'+address.address"
        @click="AddressList"
     />

     <!-- 点击跳转 到添加地址列表 -->
    <van-contact-card type="add" add-text="添加收货地址" v-else @click="AddressAdd"/>
    <!-- 商品卡片 -->
    <van-card
        v-for="(item,index) in cartlist"
        :num="item.nums"
        :price="item.total"
        :desc="'单价：￥'+ item.price"
        :title="item.product.name"
        :thumb="item.product.cover_cdn"
    >
        <!-- 插槽 -->
        <template #tags>
            <p>库存：{{item.product.stock}}</p>
        </template>
    </van-card>


    <!-- 订单备注  多行文本框  show-word-limit字数统计-->
    <van-field
        v-model="content"
        rows='2'
        name='content'
        label="订单备注" 
        placeholder="请输入订单备注" 
        maxlength="500"
        show-word-limit
     />

     <!-- 提交订单 -->
     <van-submit-bar :price="total" button-text="立即下单" @submit="SubmitOrder" />


</template>
<script>
    export default{
        name:'CartConfirm',
    created() {
       
        // 接收参数，接收完就去查数据
        // console.log(this.$route.query);
        this.cartids=this.$route.query.cartids ? this.$route.query.cartids : ''  
        this.proid=this.$route.query.proid ? this.$route.query.proid : ''  
        if(this.proid)
        {
            this.cartids=this.proid
        }
         
      //cookie没有收货地址才请求
      if(!this.address)
      {
        this.AddressData()
      }
   this.CartData()
    },

    // 定义data()
    data() {
        return {
            address:null,//收获地址
            content:'',//订单备注
            cartids:[],//传过来的参数
            cartlist:[],//如果购物车为空，给个空数组覆盖
            LoginUser: this.$cookies.get('LoginUser'),
        }
    },

    // 总计
    computed:{
        total()
        {
            var total=0
            
            for(var item of this.cartlist)
            {
                // 合计
                total+=parseFloat(item.total)
            }
            // 转单位
            total=parseFloat(total)*100
            return total
        }
    },
    methods: {
            // 返回
            back()
            {
                this.$router.go(-1)
            },
            // 提交订单
            async SubmitOrder()
            {
                // 组装数据
                var data={
                    userid:this.LoginUser.id,
                    addrid:this.address.id,
                    cartids:this.cartids,
                    content:this.content,
                }

                // 提醒
                this.$dialog.confirm({
                    message:'是否确认下单',
                }).then(async ()=>{
                    // 请求接口
                    var result =await this.$api.OrderAdd(data)

                    if(result.code==0)
                    {
                        this.$notify({
                            message:result.msg,
                            duration:1000,
                        })
                        return false
                    }else
                    {
                        // 成功
                        this.$notify({
                            type:"success",
                            message:result.msg,
                            duration:1000,
                            onClose:()=>{
                                // 跳转到订单列表
                                this.$router.push('/user/base/index')
                            }
                        })
                    }
                }).catch(()=>{})
            },

            // 获取收获地址
            async AddressData()
            {
                // 组装数据
                var data={
                    userid:this.LoginUser.id,
                }

                // 调接口
                var result=await this.$api.AddressOrder(data)
                // console.log(result);

                if(result.code==0)
                {
                    // 失败提醒
                    this.$notify({
                        message:result.msg,
                        duration:1000
                    })

                }
                // 覆盖
                this.address=result.data
                // console.log(this.address);
                
                
            },

            //点击跳转到添加地址界面(没有地址的情况)
            AddressAdd()
            {
                this.$router.push('/user/address/add')
            },

            // 点击跳转到列表页，进行切换(有地址的情况下)
            AddressList()
            {
                //从确认订单界面去掉收货列表，并传参过去order用于判断是从个人中心进去，还是添加地址过去
                this.$router.push({
                    path:'/user/address/index',
                    query:{
                        action:'order'//区分哪里来的
                    }
                })
            },

            // 获取购物车记录
           async CartData()
            {
                var data={
                    userid:this.LoginUser.id,//用户id
                    cartids: this.cartids,//传过去的只能是字符串
                }
          
                // 调用接口 
                var result=await this.$api.CartIndex(data)
                //  console.log(result.data);
                // return false
                if(result.code==0)
                {
                    // 失败就提醒并 跳回上一个界面
                    this.$notify({
                        message:result.msg,
                        duration:1000,
                        onClose:()=>{
                            // 返回上一个页面
                            this.$router.go(-1)
                        }
                    })
                    // 结束，判断
                  return false
                }

                // 空数组覆盖
                this.cartlist=result.data
    
            },

        
        },
    }
</script>

<style>
    .product{
      position: relative;
    }
  
    .product .van-card{
      padding-left:3em;
    }
  
    .product .van-card__footer{
      position: absolute;
      right:1em;
      bottom: 1em;
    }
  
  
    .item{
      position: absolute;
      z-index:1;
      top:42%;
      left:1%;
    }
  
    .delete-button {
      height: 100%!important;
    }
</style>